<template>
  <el-card>
    <el-table border style="margin: 10px 0px;" :data="skuArr">
      <el-table-column label="序号" align="center" type="index" width="80px"></el-table-column>
      <el-table-column label="名称" show-overflow-tooltip width="150px" prop="skuName"></el-table-column>
      <el-table-column label="描述" show-overflow-tooltip width="150px" prop="skuDesc"></el-table-column>
      <el-table-column label="图片"  width="150px">
        <template #="{row,$index}">
          <img :src="row.skuDefaultImg" style="width: 100px;height: 100px;">
        </template>
      </el-table-column>
      <el-table-column label="重量(g)" width="150px" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" width="150px" prop="price"></el-table-column>
      <el-table-column label="操作" width="250px" fixed="right">
        <template #="{row,$index}">
            <el-button :icon="row.isSale==1?'Bottom':'Top'"  type="primary" size="small" @click="updateSale(row)"></el-button>
            <el-button icon="Edit" type="primary" size="small" @click="updateSku"></el-button>
            <el-button icon="InfoFilled" @click="findSku(row)" type="primary" size="small"></el-button>
            <el-popconfirm :title="`你确定要删除${row.skuName}?`" width="200px" icon="Delete" @confirm="removeSku(row.id)">
             <template #reference>
              <el-button size="small" type="primary" icon="Delete"></el-button>
             </template>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!--  @current-change会把当前的页码注入 -->
<!-- @size-change会将页数注入（一页多少条数据） -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10,20,30,40]"
      :background="true"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @current-change="getHasSku"
      @size-change="handler"
    />
    <!-- 抽屉组件 ： 展示商品详情 -->
     <!--v-model控制抽屉的显示与隐藏  -->
   
  <el-drawer v-model="drawer">
    <template #header>
      <h4>查看商品的详情</h4>
    </template>
    <!-- 栅格系统 24栏 -->
    <template #default>
      <el-row style="margin: 10px 0px;">
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0px;">
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
      </el-row>
      <el-row style="margin: 10px 0px;">
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row style="margin: 10px 0px;">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag style="margin: 5px;" v-for="item in skuInfo.skuAttrValueList" :key="item.id">{{item.valueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0px;">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag style="margin: 5px;" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">{{item.saleAttrValueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0px;">
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <!-- 轮播图 -->
          <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                <img :src="item.imgUrl" alt="" style="width:100%;height: 100%;">
              </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </template>
    <template #footer>
   
    </template>
  </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import { reqSaleSku, reqSkuList ,reqCancelSale,reqSkuInfo,reqRemoveSku} from '@/api/product/sku';
import type { SkuResponseData,SkuData ,SkuInfoData} from '@/api/product/sku/type';
import { ElMessage } from 'element-plus';
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let skuArr = ref<SkuData[]>([])
//控制抽屉的显示与隐藏
let drawer = ref<boolean>(false)
onMounted(()=>{
  getHasSku()
})
//存储查看商品详情的数据
let skuInfo = <any>ref({})
const getHasSku = async(pager=1)=>{
  // 默认第一页
  pageNo.value = pager
  let result:SkuResponseData = await reqSkuList(pageNo.value,pageSize.value)
  if(result.code==200){
    total.value = result.data.total
    skuArr.value = result.data.records
  }
}

//分页器下拉菜单发生变化时触发
//@ts-ignore
const handler = (pageSizes:number)=>{
  getHasSku()
}

//商品的上架与下架的操作
const updateSale = async(row:SkuData) =>{
  //判断 若是上架（1） 变下架           反之也是
  if(row.isSale==1){
    await reqCancelSale((row.id as number))
    ElMessage({
      type:'success',
      message:'下架成功'
    })
    //发请求获取当前更新完毕的全部已有sku
    getHasSku(pageNo.value)
  }else{
    await reqSaleSku((row.id as number))
    ElMessage({
      type:'success',
      message:'上架成功'
    })
    //发请求获取当前更新完毕的全部已有sku
    getHasSku(pageNo.value)
  }
}

const updateSku = ()=>{
  ElMessage({
      type:'success',
      message:'程序员在努力地更新中.....'
    })
}
//查看商品详情按钮的回调  row是已有的sku
const findSku = async(row:SkuData)=>{
  //抽屉展示chul
  drawer.value = true
  //发请求
  let result:SkuInfoData = await reqSkuInfo((row.id as number))
  //存储已有的sku
  skuInfo.value = result.data
}

//删除已有sku
const removeSku = async(id:number)=>{
  let result:any = await reqRemoveSku(id)
  if(result.code == 200){
    ElMessage({
      type:'success',
      message:'删除成功'
    })
    getHasSku(skuArr.value.length>1?pageNo.value:pageNo.value-1)
  }else{
    ElMessage({
      type:'error',
      message:'系统数据不能删'
    })
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>